<template>
   <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="showTel">查看联系方式</button>
    <button @click="changename">修改名字</button>
    <button @click="addAge">改变年龄</button>
   </div>
</template>

<script lang="ts"> 
    export default {
        name:"Person",
        // data(){
        //     return {
        //         name:"张三",
        //         age:18,
        //         tel:"1888888888888"
        //     }
        // },
        // methods:{
        //     changename(){
        //         this.name = "李三"
        //     },
        //     addAge(){
        //         this.age +=1
        //     },
        //     showTel(){
        //         alert(this.tel)
        //     }
        // }'
        setup(){
            let  name="张三";
            let  age=18;
            let  tel="1888888888888";
            // alert(this)
           function changename(){
                this.name = "李三"
                // alert(this.name)
            }
           function addAge(){
                this.age +=1
            }
           function showTel(){
            // alert(this)
            // alert(JSON.stringify(this))
                // alert(this.tel)
                alert(tel)
            }
            // alert(this.tel)
            return{
                name,
                age,
                // tel,
                changename,
                addAge,
                showTel

            }
        }
    
    }
</script>

<style  scoped>


    .person{
        background-color: skyblue;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
</style>